import styled from 'styled-components';
import React, { CSSProperties, FC, useCallback, useEffect, useState } from 'react';
import { Card, Button } from 'antd';
import { SendOutlined } from '@ant-design/icons';
import { FILE_EXTS } from '@/components/base/prompt-editor/constants'
import { ProjectApplication } from '../types';
import PromptEditor from '@/components/base/prompt-editor';
import ConfigPrompt from '@/components/app/configuration/config-prompt'
import Configuration from '@/components/app/configuration'
import { FeaturesProvider } from '@/components/base/features';
import type { Features as FeaturesData } from '@/components/base/features/types'
import { FileUploadConfigResponse } from '@/models/common';
import { SupportUploadFileTypes } from '@/components/workflow/types';
import { AppType } from '@/services/types/app';

export interface ApplicationAgentPanelProps {
    style?: CSSProperties;
    application: ProjectApplication;
}

export const ApplicationAgentPanel: FC<ApplicationAgentPanelProps> = (props) => {

    // mode,
    // promptTemplate,
    // promptVariables,
    // noTitle,
    // gradientBorder,
    // readonly = false,
    // editorHeight,
    // noResize,
    // onChange,
    const features: any = {}

    let fileUploadConfigResponse: FileUploadConfigResponse = {
        batch_count_limit: 100,
        image_file_size_limit: '10MB',
        file_size_limit: 15,
        audio_file_size_limit: 50,
        video_file_size_limit: 100,
        workflow_file_upload_limit: 10,
    };

    const initialFeatures: FeaturesData = {
        file: {
            image: {
                enabled: !!features.file_upload?.image?.enabled,
                number_limits: features.file_upload?.image?.number_limits || 3,
                transfer_methods: features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
            },
            enabled: !!(features.file_upload?.enabled || features.file_upload?.image?.enabled),
            allowed_file_types: features.file_upload?.allowed_file_types || [SupportUploadFileTypes.image],
            allowed_file_extensions: features.file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`),
            allowed_file_upload_methods: features.file_upload?.allowed_file_upload_methods || features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
            number_limits: features.file_upload?.number_limits || features.file_upload?.image?.number_limits || 3,
            fileUploadConfig: fileUploadConfigResponse,
        },
        opening: {
            enabled: !!features.opening_statement,
            opening_statement: features.opening_statement,
            suggested_questions: features.suggested_questions,
        },
        suggested: features.suggested_questions_after_answer || { enabled: false },
        speech2text: features.speech_to_text || { enabled: false },
        text2speech: features.text_to_speech || { enabled: false },
        citation: features.retriever_resource || { enabled: false },
        moderation: features.sensitive_word_avoidance || { enabled: false },
    }


    return (
        // <FeaturesProvider features={initialFeatures}>
            <div className={`w-full shrink-0 flex flex-col h-full`}>
                <Configuration />
            </div>
        // </FeaturesProvider >
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
`;

const ConfigContainer = styled.div`
    height: 100%;
    width: 50%;
`;
const PreviewContainer = styled.div`
    height: 100%;
    flex:1;
`;